

<template>
      <h3 style="text-align: center;">注册页面</h3>
    <table style="margin: 0 auto;">
      <tr>
        <td>用户名：</td>
        <td><input type="text" placeholder="请输入用户名"  v-model="info.Uname"></td>
      </tr>
      <tr>
        <td>密码：</td>
        <td><input type="password" placeholder="请输入密码" v-model="info.Upwd"></td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center;">
          <input type="button" @click="SaveData" value="注册" >
        </td>
      </tr>
    </table>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import axios from 'axios';
    //引入路由  useRouter() 创建路由实例
    import { useRouter } from 'vue-router';
    //创建路由实例
    const router = useRouter();
    //创建响应式数据
    const info = ref({
        Uname: '',
        Upwd: ''
    })
    //注册事件
    const SaveData = () => {
        //判断用户名是否为空
        if(info.value.Uname == ''){
            alert('用户名不能为空')
            return;
        }
        //判断密码是否为空
        if(info.value.Upwd == ''){
            alert('密码不能为空')
            return;
        }
        axios({
            //设置请求的地址
            url:"https://localhost:44337/api/Users/UserRegister",
            //设置请求方式
            method:"post",
            //设置请求参数
            data:{
                UL_Name:info.value.Uname,
                UL_PassWord:info.value.Upwd
            }
        }).then(function(res){
            //请求成功执行
            if(res.data>0)
            {
                alert('用户注册成功')
                //跳转到登录页面
                router.push('/Login');
            }
            else if(res.data==-1)
            {
                alert('用户名已存在')
            }
            else
            {
                alert('用户注册失败')
            }
        }).catch(function(err){
            //请求失败执行
             console.log(err);
        })
        
    }
</script>